<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-t-20 u-p-l-20 u-p-r-20 u-back-white">
			<!-- <view class="u-p-t-30 u-p-b-30 u-flex u-row-between u-line-bottom">
				<view class="u-font-bold">隐私设置</view>
				<view class="u-flex">
					<view class="u-color-gray u-font-24 u-m-r-20" @click="openSelect">
						{{ selectCheckObj.value ? selectCheckObj.label : '设置对好友、来友可见的信息' }}</view>
					<u-icon name="arrow-right" size="24" color="#868B9A"></u-icon>
				</view>
			</view> -->
			<view class="u-p-t-30 u-p-b-30 u-flex u-row-between u-line-bottom" @click="openChange">
				<view class="u-font-bold">修改手机号码</view>
				<u-icon name="arrow-right" size="24" color="#868B9A"></u-icon>
			</view>
			<view class="u-p-t-30 u-p-b-30 u-flex u-row-between u-line-bottom">
				<view class="u-font-bold">注销</view>
				<view class="u-flex" @click="openLogout">
					<view class="u-color-gray u-font-24 u-m-r-20">注销账号</view>
					<u-icon name="arrow-right" size="24" color="#868B9A"></u-icon>
				</view>
			</view>
		</view>
		<Bottom :isReturn="true"></Bottom>

		<!-- 隐私选项 -->
		<view v-if="selectShow">
			<u-select v-model="selectShow" :list="selectList" :default-value="[0]" @confirm="selectConfirm"></u-select>
		</view>

		<!-- 区号 -->
		<view v-if="codeData.show">
			<u-select v-model="codeData.show" @confirm="codeConfirm" :default-value="[0]" :z-index="10079"
				:mask-close-able="false" value-name="area_code" :list="codeData.list"></u-select>
		</view>

		<!-- 修改手机号码 -->
		<u-popup v-model="popupData.show" mode="bottom" border-radius="20">
			<view class="u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-50">
				<view class="u-font-32 u-font-bold u-m-l-10 u-color-darkBlue">请设置修改后的手机号码</view>
				<view class="u-m-t-20">
					<view class="u-flex">
						<view class="area_box" @click="codeData.show = true">+{{ popupData.area_code}}</view>
						<view class="u-flex-1 u-m-l-20">
							<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" id="mobile_btn"
								:class="popupData.keyword ? '' : 'u-color-gray'">
								{{ popupData.keyword || '点击获取微信手机号码' }}
							</button>
						</view>
					</view>
				</view>
				<view class="u-flex u-m-t-30">
					<view class="addBtn" @click="closeBank">取消</view>
					<view class="bottomBtn" @click="confirmBank">保存</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 注销 -->
		<Modal :show="modal.show" :confirmText="modal.confirmText" :modalTitle="modal.title" :cancelText="modal.cancelText"
			:modalContent="modal.content" :showCancel="modal.showCancel" :showConfirm="modal.showConfirm"
			@cancel="modal.show = false" @confirm="modalConfirm"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import {
		phoneAreaCode,
		userUpdateMobile,
		getPhone,
		userLogout
	} from '@/network/api.js'
	export default {
		components: {
			Navbar,
			Bottom,
			Modal
		},
		data() {
			return {
				selectList: [{
						label: '所有人可见',
						value: 1
					},
					{
						label: '仅好友可见',
						value: 2
					},
					{
						label: '仅来友可见',
						value: 3
					}
				],
				selectCheckObj: {},
				selectShow: false,
				popupData: {
					show: false,
					area_code: '86',
					keyword: ''
				},
				codeData: {
					show: false,
					list: []
				},
				customStyle: {
					height: '90rpx',
					lineHeight: '90rpx',
					background: '#F3F4F6',
					padding: '0 30rpx',
					borderRadius: '50rpx'
				},
				modal: {
					show: false,
					showCancel: true,
					showConfirm: true,
					title: '',
					confirmText: '',
					cancelText: '',
					content: ''
				},
			}
		},
		onLoad() {
			this.getCountryCode()
		},
		methods: {
			getCountryCode() {
				phoneAreaCode().then(res => {
					res.data.forEach(item => {
						item.label = item.name + '+' + item.area_code
					})
					this.codeData.list = res.data
				})
			},
			codeConfirm(val) {
				this.popupData.area_code = val[0].value
				this.codeData.show = false
			},
			selectConfirm(val) {
				this.selectCheckObj = val[0]
			},
			openSelect() {
				uni.showToast({
					title: "暂未开放",
					icon: "none"
				})
			},
			openLogout(){
				this.modal.title = '风险提示'
				this.modal.content = '确认注销后，您的账号信息将被清空且无法找回。确定要注销当前账号吗？'
				this.modal.confirmText = '确定注销'
				this.modal.cancelText = '取消操作'
				this.modal.show = true
			},
			modalConfirm(){
				this.modal.show = false
				if(this.modal.title == '风险提示'){
					userLogout({user_id:uni.getStorageSync("user_id")}).then(res=>{
						setTimeout(()=>{
							this.modal.title = '温馨提示'
							this.modal.content = '您已成功注销账号，期待下次与您相遇。'
							this.modal.confirmText = '确定'
							this.modal.showCancel = false
							this.modal.show = true
						},300)
					})
				}
				if(this.modal.title == '温馨提示'){
					uni.clearStorage()
					uni.redirectTo({
						url: "/operate/agreement/agreement?type=15&back=home"
					})
				}
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					this.$u.toast("拒绝手机号登录");
					return;
				}
				getPhone({
					code: e.detail.code
				}).then(res => {
					this.popupData.area_code = res.data.phone_info.countryCode
					this.popupData.keyword = res.data.phone_info.purePhoneNumber
				})
			},
			openChange() {
				this.popupData.keyword = ''
				this.popupData.area_code = '86'
				this.popupData.show = true
			},
			closeBank() {
				this.popupData.show = false
			},
			confirmBank() {
				let _this = this
				if (this.popupData.keyword) {
					const params = {
						user_id: uni.getStorageSync("user_id"),
						area_code: this.popupData.area_code,
						phone: this.popupData.keyword
					}
					userUpdateMobile(params).then(res => {
						if (res.err == 0) {
							uni.showToast({
								title: `${res.msg}`,
								icon: "none"
							})
							_this.popupData.show = false
						}
					})
				} else {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.area_box {
		width: 200rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #F3F4F6;
		border-radius: 50rpx;
		text-align: center;
	}

	.addBtn {
		flex: 1;
		height: 80rpx;
		background: #A7B0C0;
		color: #fff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		margin-right: 40rpx;
		border: 1rpx solid #ccc;
	}

	.bottomBtn {
		flex: 1;
		height: 80rpx;
		background: #fb6316;
		color: #fff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	#mobile_btn {
		height: 90rpx;
		lineHeight: 90rpx;
		background: #F3F4F6;
		padding: 0 30rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#mobile_btn::after{
		border: none !important
	}
</style>